<!--
 * @Author: 黄灿民
 * @Date: 2021-04-16 21:45:27
 * @LastEditTime: 2022-01-18 16:57:06
 * @LastEditors: 黄灿民
 * @Description: 
 * @FilePath: \06.音乐播放器\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/recommendList.css">
    <link rel="stylesheet" href="./css/player.css">
    <script src="./assets/iconfont.js"></script>
</head>

<body>
    <div class="wrapper d-flex  flex-column">
        <header class="header" id="header-title">
            <a href="#home"> 推荐页</a>
        </header>
        <section id="app" class="content">
            <!-- 此处为中间内容，通过 js 动态生成 -->
        </section>
        <section class="player-control d-flex justify-content-start ">
            <div class="player-control-songinfo d-flex justify-content-start">
                <!-- <div class="img "> -->
                    <!-- 新添加 a 标签进行页面跳转 -->
                    <a class="img pointer" href="#/player/:167882" id="playerCover">
                        <img src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                            alt="">
                    </a>
                    <a class="img pointer display-none" href="#/recommendList/:3136952023" id="playerCoverBack">
                        <img src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                            alt="">
                    </a>
                <!-- </div> -->
                <div class="songinfo d-flex flex-column align-items-start">
                    <span class="songname">歌曲一</span>
                    <span class="single-text-omitted singer">歌手2323232323232</span>
                </div>
            </div>
            <div class="player-control-unit d-flex justify-content-between">
                <div class="control">
                    <!-- 新增加上一首的 id 选择器 -->
                    <svg class="icon" aria-hidden="true" id="player-prev">
                        <use xlink:href="#icon-shangyiqu"></use>
                    </svg>
                    <!-- 新增加播放暂停的 id 选择器 -->
                    <svg class="icon" aria-hidden="true" id='player-control'>
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <!-- 新增加下一首的 id 选择器 -->
                    <svg class="icon" aria-hidden="true" id="player-next">
                        <use xlink:href="#icon-xiayiqu"></use>
                    </svg>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="song-progress d-flex justify-content-between">
                        <span class="current-time">00:00</span>
                        <div class="progress" id='progress-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                        <span class="total-time">00:00</span>
                    </div>
                    <div class="volume d-flex">
                        <svg class="icon volume-icon" aria-hidden="true">
                            <use xlink:href="#icon-yinliang"></use>
                        </svg>
                        <div class="progress" id='volume-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <!-- 新增加播放模式的 id 选择器 -->
                    <svg class="icon" aria-hidden="true" id="musicMode">
                        <use xlink:href="#icon-liebiaoxunhuan"></use>
                    </svg>
                    <!-- 新增加播放列表的 id 选择器 -->
                    <svg class="icon" aria-hidden="true" id='playerList'>
                        <use xlink:href="#icon-bofangliebiao"></use>
                    </svg>
                </div>
            </div>
        </section>
        <!-- 新增播放列表 -->
        <section class="player-list display-none">
            <h3 class="player-list-title">播放列表</h3>
            <ul class="player-list-ul">
                <!-- <li class="player-list-li d-flex justify-content-start pointer">
                    <div class="song-name">sd</div>
                    <div class="singer">da</div>
                    <div class="song-time">ad</div>
                </li>
                <li class="player-list-li d-flex justify-content-start pointer">
                    <div class="song-name">sd</div>
                    <div class="singer">da</div>
                    <div class="song-time">ad</div>
                </li> -->
            </ul>
        </section>
    </div>
    <!-- 新添加音频 -->
    <audio src="" id="myAudio"></audio>
    <script src="./dist/main.js"></script>
</body>

</html>